{{extend './base.html'}}
{{block 'title'}}
文章管理
{{/block}}
{{block 'style'}}
<style>
    .list-group-flush li a {
        text-decoration: none;
        color: #4a4a4a;
    }

    .list-group-flush li.li-active a {
        color: #1e7e34;
    }

    .row-wrapper {
        margin-top: 20px;
    }

    .table {
        min-width: 1200px;
    }

    .table-wrapper {
        overflow: auto;
    }
    .title{
        width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    #pagination .active a{
        color: #fff !important;
    }
</style>
{{/block}}
{{block 'content'}}
<div class="container">
    <div class="row row-wrapper">
        <button class="btn btn-primary" id="create-tag" data-toggle="modal" data-target="#myModal">标签创建</button>
        <div class="col-md-3 col-sm-12">
            <div class="card">
                <div class="card-header">
                    用户设置
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <a href="/user/center">
                            基本信息
                        </a>
                    </li>
                    <li class="list-group-item">
                        <a href="/user/setting">
                            密码修改
                        </a>
                    </li>
                    <li class="list-group-item li-active">
                        <a href="/user/blog">
                            文章管理
                        </a>
                    </li>
                    <li class="list-group-item">
                        <a href="/user/blog/edit">文章编辑</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-9 col-sm-12 table-wrapper">
            <table class="table table-striped">
                <thead>
                <tr>
                    <td>标题</td>
                    <td>标签</td>
                    <td>内容</td>
                    <td>作者</td>
                    <td style="width: 80px;text-align: center;">浏览量</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3"></div>
        <ul id="pagination" class="col-md-9 pagination"></ul>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">创建标签</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">标签名</label>
                            <div class="col-sm-10">
                                <input type="text" id="blog_tag" placeholder="请输入标签名" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
{{/block}}
{{block 'js'}}
<script src="/js/jq-paginator.min.js"></script>
<script type="text/javascript">
    $(function () {
        var total_count = 1;
        function getBlog(page = 1, page_size = 10) {
            $.ajax({
                url: '/blog/list?category=json',
                type: 'GET',
                data: {page, page_size},
                success: function (res) {
                    if (res.err_code === 0) {
                        $('#tbody').empty()
                        total_count = res.total_count
                        let items = res.blogs
                        for (let x of items) {
                            $('#tbody').append(`
                                <tr>
                                    <td class="title">${x.title}</td>
                                    <td>${x.tag && x.tag.blog_tag}</td>
                                    <td>${x.content && x.content.substring(0, 150)}</td>
                                    <td>${x.user}</td>
                                    <td style="width: 80px;text-align: center;">${x.read_num}</td>
                                    <td style="width: 150px;">${dayjs(x.create_date).format('YYYY-MM-DD') }</td>
                                    <td style="width: 200px">
                                        <button class="edit btn btn-primary" data-id="${x._id}">编辑</button>
                                        <button class="delete btn btn-danger" data-id="${x._id}">删除</button>
                                    </td>
                                </tr>
                            `)
                        }
                        $('#pagination').jqPaginator('option', {
                            totalCounts: total_count
                        });
                    }
                }
            })
        }
        getBlog()
        /* 若需要更好的分页 https://jqpaginator.keenwon.com/#a3*/
        $('#pagination').jqPaginator({
            totalCounts: 1,
            visiblePages: 100,
            currentPage: 1,
            pageSize: 10,
            onPageChange: function (num, type) {
                if (type === 'change') {
                    getBlog(page=num)
                }
            }
        });
        $('#tbody').on('click', '.delete', function () {
            const id = $(this).attr('data-id')
            $.ajax({
                url: '/user/blog/delete?id='+id,
                success: function (res) {
                    if (res.err_code === 0) {
                        cocoMessage.success(res.msg);
                        getBlog()
                    } else {
                        cocoMessage.warning(res.msg);
                    }
                }
            })
        })
        $('#tbody').on('click', '.edit', function () {
            const id = $(this).attr('data-id')
            location.href = '/user/blog/edit?id='+id
        })
    })
    $('#save').click(function () {
        const tag = $('#blog_tag').val()
        $.ajax({
            url: '/blog/tag',
            type: 'POST',
            data: {tag},
            success: function (res) {
                if (res.err_code === 0) {
                    cocoMessage.success('标签创建成功');
                    $('#myModal').modal('hide');
                } else {
                    cocoMessage.warning('标签创建失败');
                }
            }
        })
    })
</script>
{{/block}}

